<template>
  <div class="my">
    <my-top :scrollY="scrollY" v-show="hid1"></my-top>
    <!-- <Set></Set> -->
    <div class="box1" :class="color">
      <div class="smallPic">
      <p></p>
      <p @click="set"></p>
    </div>
    <div class="top1">
      <div class="left">
        <h2 >登录</h2>
        <div class="small">
          <p></p>
          <p>我的在线简历</p>
        </div>
      </div>
      <p class="hp"></p>
    </div>
    <div class="list1">
      <ul>
        <li v-for="item,index in datalist" :key="index">
          <p>{{item.num}}</p>
          <p>{{item.name}}</p>
        </li>
      </ul>
    </div>
    </div>
    <div class="pic1">
      <img :src="URL+'my/1.png'" alt="">
    </div>
    <div class="list2">
      <h5>常用功能</h5>
      <ul>
        <li v-for="item,index in datalist2" :key="index">
          <p :style="'background: url('+URL+'my/2.png) '+item.posi+'/400% no-repeat;'" class="l_img"></p>
          <p>{{item.name}}</p>
        </li>
      </ul>
    </div>
    <div class="pic2">
      <img :src="URL+'my/3.png'" alt="">
    </div>
    <div class="other">
      <h5>其他功能</h5>
      <ul class="myul">
        <li>
          <p><img :src="URL+'my/main.svg'" alt=""></p>
          <p>个人主页</p>
        </li>
        <li>
          <p><img :src="URL+'my/hammer.svg'" alt=""></p>
          <p>众裁厅</p>
        </li>
        <li>
          <p><img :src="URL+'my/heart.svg'" alt=""></p>
          <p>就业辅导</p>
        </li>
        <li>
          <p><img :src="URL+'my/question.svg'" alt=""></p>
          <p>帮助反馈</p>
        </li>
        <li>
          <p><img :src="URL+'my/custome.svg'" alt=""></p>
          <p>我的客服</p>
        </li>
        <li>
          <p><img :src="URL+'my/ad.svg'" alt=""></p>
          <p>安全治理</p>
        </li>
        <li>
          <p><img :src="URL+'my/cheat.svg'" alt=""></p>
          <p>防骗指南</p>
        </li>
        <li>
          <p><img :src="URL+'my/about.svg'" alt=""></p>
          <p>关于</p>
        </li>
        <li>
          <p><img :src="URL+'my/query.svg'" alt=""></p>
          <p>薪酬查询</p>
        </li>
        <li>
          <p><img :src="URL+'my/show.svg'" alt=""></p>
          <p>规则公示</p>
        </li>
        <li>
          <p><img :src="URL+'my/umbrella.svg'" alt=""></p>
          <p>因素保护</p>
        </li>
      </ul>
    </div>
    <div class="lat">
      <div class="fir">
        <p>客服电话 400-065-5799</p>
        <p>工作时间 9:30-18:30</p>
      </div>
      <div class="sec">
        <p>老年人直连热线 400-661-6030</p>
        <p>工作时间 9:30-18:30</p>
      </div>
      <div class="thi">
        <p>未成年人投诉举报渠道同上</p>
      </div>
      <div class="fou">
        <p>人力资源服务许可证  营业执照  朝阳区人社局监督电话</p>
      </div>
    </div>
  </div>
</template>
<script>
import MyTop from "@/components/MyTop.vue"
export default {
  name:'my',
  components:{
    MyTop
  },
  data(){
    return{
      scrollY:0,
      hid1:false,
      // hid2:false,
      color:'',
      datalist:[
        {num:"0",name:"沟通过"},
        {num:"0",name:"已投简历"},
        {num:"0",name:"面试"},
        {num:"0",name:"收藏"}
      ],
      datalist2:[
        {posi:"3px 0",name:"在线简历"},
        {posi:"-38px 0",name:"附件简历"},
        {posi:"-79px 0",name:"求职意向"},
        {posi:"-120px 0",name:"道具商城"}
      ]
    }
  },
  watch:{scrollY:'scrollTop'},
  mounted(){
    window.addEventListener('scroll',this.scrollTop)
    this.color = this.$store.getters.color
  },
  methods:{
    scrollTop(){
      this.scrollY = window.pageYOffset
      if(this.scrollY>50){
        this.hid1 = true
        // this.hid2 = false
      }else if(this.scrollY<50){
        this.hid1 = false
        // this.hid2 = true
      }
    },
    set(){
      this.$router.push('/set')
      this.$store.commit('judge')
    }
  }
}
</script>
<style lang="scss" scoped>
  .box1{
    width: 100%;
    height: 255px;
    // background: #37c2bb;
  }
  .smallPic{
    display: flex;
    width: 100%;
    // height: 200px;
    // background: #37c2bb;
    // z-index: -1;
    p:nth-child(1){
      height: 20px;
      width: 20px;
      background-size: 215%;
      background-image: url(#{$URL}my/icon.png);
      background-position: 0px 0px;
      margin-left: 290px;
      margin-top: 30px;
    }
    p:nth-child(2){
      height: 20px;
      width: 20px;
      background-size: 190%;
      background-image: url(#{$URL}my/icon.png);
      background-position: -18px 0px;
      margin-left: 20px;
      margin-top: 30px;
    }
  }
  .left{
    padding-left: 30px;
    h2{
      padding-top: 23px;
      color: white;
    }
    .small{
      display: flex;
      // padding-top: 20px;
      // padding-left: 30px;
      padding-top: 10px;
      p:nth-child(1){
        height: 15px;
        width: 15px;
        background-size: 215%;
        background-image: url(#{$URL}my/icon.png);
        background-position: 0px -15px;
        background-repeat: no-repeat;
        // padding-top: 10px;
        margin-top: 3px;
      }
      p:nth-child(2){
        font-size: 12px;
        color: white;
      }
    }
  }
  .top1{
    display: flex;
  }
  .hp{
    width: 60px;
    height: 60px;
    background: url(#{$URL}01.svg) 0 0 /100%;
    margin-left: 170px;
    margin-top: 20px;
  }
  .list1{
    padding-top: 30px;
    ul{
      display: flex;
      li{
        width: 80px;
        // height: 50px;
        text-align: center;
        font-size: 14px;
        margin-left: 15px;
        color: white;
      }
      // li:nth-child(4){
      //   width: 40px;
      // }
    }
  }
  .pic1{
    width: 100vw;
    img{
      width: 90vw;
      margin-left: 5vw;
      margin-top: -25px;
      border-radius: 14px;
    }
  }
  .list2{
    padding: 20px 20px;
    font-family: 'Courier New', Courier, monospace;
    h5 {
      
      margin-bottom: 10px;
    }
    ul{
      display: flex;
      justify-content: space-around;
      li{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .l_img {
          width: 40px;
          height: 40px;
          margin-bottom: 10px;
        }
        p {
          font-size: 12px;
          font-weight: 600;
        }
      }
    }
  }
  .pic2{
    width: 100vw;
    img{
      width: 90vw;
      margin-left: 5vw;
      // margin-top: -25px;
      border-radius: 14px;
    }
  }
  .other{
    // height: 300px;
    padding: 20px;
    h5{
      margin-left: 5px;
    }
    .myul{
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-around;
      li{
        text-align: center;
        margin: 17px;
        p{
          img{
            width: 35px;
            height: 35px;
          }
        }
        p:nth-child(2){
          font-size: 12px;
        }
      }
    }
  }
  .lat{
    height: 160px;
    font-size: 12px;
    color: rgb(214, 212, 212);
    .fir{
      display: flex;
      p{
        margin-left: 45px;
      }
    }
    .sec{
      display: flex;
      margin-top: 10px;
      p{
        margin-left: 40px;
      }
      p:nth-child(2){
        margin-left: 13px;
      }
    }
    .thi{
      text-align: center;
      margin-top: 10px;
    }
    .fou{
      margin-top: 10px;
      margin-left: 40px;
    }
  }
</style>